<template>
  <view class="attr" v-if="home.attr && home.attr && home.attr[0].length > 0">
    <view class="label">
      <view class="item" @click="switchTab(item)" :class="{'active': item.index === currentIndex}" v-for="item in labels" :key="item.index">{{ item.name }}</view>
    </view>
    <view class="product">
      <view class="item" v-for="item in list" :key="item.id" @click="goProduct(item)">
        <v-image :url="item.mainImage.path" v-if="item.mainImage" :width="'300rpx'" />
        <view class="desc">
          <view class="title two-lines">{{ item.title }}</view>
          <view class="title_sub one-lines" v-if="item.title_sub">{{ item.title_sub }}</view>
          <v-price :product="item" class="price" />
          <view class="btn">立即购买</view>
        </view>
      </view>
      <view class="more" @click="goMore()">
        <view class="text">查看更多></view>
      </view>
    </view>
  </view>
</template>

<script>

import Image from '../../../../components/image/index'
import Price from '../../../../components/price/index'

export default {
  props: ['home'],
  components: {
    'v-image': Image,
    'v-price': Price,
  },
  computed: {
    list() {
      // 一定要这么写, 否则在小程序中会报错
      if (this.home.attr && this.home.attr.length > 0) {
        return this.home.attr[this.currentIndex - 1]
      }
      return []
    }
  },
  data() {
    return {
      labels: [
        { index: 1, name: '每日上新' },
        { index: 2, name: '畅销好物' },
        { index: 3, name: '精选好物' },
        { index: 4, name: '超值兑换' },
      ],
      currentIndex: 1,
    }
  },
  methods: {
    goProduct(item) {
      uni.navigateTo({
        url: `/sub_product/detail/index?id=${item.id}`
      })
    },
    switchTab(item) {
      this.currentIndex = item.index
    },
    goMore() {
      uni.navigateTo({
        url: `/sub_product/all/attr?type=${this.currentIndex}`
      })
    }
  },
  created() {
  },
  mounted() {
  },

}
</script>

<style scoped lang="scss">
.attr {
  //background: $attr_color;
  margin: 0 20rpx;
  //padding: 20rpx;
  .label {
    display: flex;
    justify-content: space-between;
    .item {
      //margin-right: 10rpx;
      padding: 15rpx 23rpx;
      border-top-right-radius: 10rpx;
      border-top-left-radius: 10rpx;
      font-size: 28rpx;
      border: 1rpx solid $attr_color;
      background: white;
      color: $attr_color;
      letter-spacing: 3rpx;
      &.active {
        background: $attr_color;
        color: white;
      }
    }
  }
  .product {
    margin-top: -1rpx;
    background: $attr_color;
    padding: 20rpx 20rpx 10rpx 20rpx;
    .more {
      display: flex;
      justify-content: center;
      .text {
        display: inline-block;
        background: white;
        color: $main_color;
        padding: 10rpx 20rpx;
        border-radius: 10rpx;
        font-size: 24rpx;
      }
    }
    .item {
      background: white;
      border-radius: 10rpx;
      padding: 20rpx;
      margin-bottom: 20rpx;
      display: flex;
      .desc {
        flex: 1;
        padding-left: 20rpx;
        position: relative;
        .title {
          line-height: 1.35em;
          color: #4b4b4b;
          font-weight: 700;
          margin: 20rpx 0 10rpx 0;
          font-size: 28rpx;
          text-align: left;
        }
        .title_sub {
          color: #bbbbbb;
          font-size: 24rpx;
          text-align: left;
        }
        .btn {
          background: #ff212a;
          color: white;
          font-size: 24rpx;
          border-radius: 10rpx;
          display: inline-block;
          position: absolute;
          right: 20rpx;
          bottom: 20rpx;
          padding: 5rpx;
        }
      }
    }
  }
}
</style>
